/*
  We're using CSS transitions for when
  the enter and move events are triggered
  for the element that has the .ng-animation
  class
*/
.ng-animation.ng-enter, .ng-animation.ng-move {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:0;
}

/*
 The ng-enter-active and ng-move-active
 are where the transition destination properties
 are set so that the animation knows what to
 animate.
*/
.ng-animation.ng-enter.ng-enter-active,
.ng-animation.ng-move.ng-move-active {
    opacity:1;
}

/*
  We're using CSS keyframe animations for when
  the leave event is triggered for the element
  that has the .ng-animation class
*/
.ng-animation.ng-leave {
    -webkit-animation:0.5s my_animation;
    -moz-animation:0.5s my_animation;
    -o-animation:0.5s my_animation;
    animation:0.5s my_animation;
}

@keyframes my_animation {
    from { opacity:1; }
    to { opacity:0; }
}

/*
  Unfortunately each browser vendor requires
  its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
    from { opacity:1; }
    to { opacity:0; }
}

@-moz-keyframes my_animation {
    from { opacity:1; }
    to { opacity:0; }
}

@-o-keyframes my_animation {
    from { opacity:1; }
    to { opacity:0; }
}